
import React from 'react';
import css from './index.less';
import PropTypes from 'prop-types';
import Icon from 'components/icon';
import indexOf from 'lodash/indexOf';
import last from 'lodash/last';

export default class Inner extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isCheck: false,
      isWidth: true,
    };
  }

  static propTypes = {
    mod: PropTypes.object,
  };

  click() {
    // this.setState((preState) => {
    //   let stateA = !preState.isCheck;
    //   preState.isCheck = stateA;
    //   const { getData = () => {}, mod } = this.props;
    //   getData(stateA, mod);
    // });

    const { getData = () => {}, mod, chooseLog, radio } = this.props;
    getData(mod);
    // console.log('isRadio', radio);


    // chooseLog.forEach( item => {
    //   if (radio) {
    //     if (item == last(chooseLog)) {
    //       console.log('11111', chooseLog);
    //       this.setState({
    //         isCheck: true,
    //       });
    //     } else {
    //       console.log('22222', chooseLog);
    //       this.setState({
    //         isCheck: false,
    //       });
    //     }
    //   } else {
    //     console.log('isRadio222', radio);
    //     let index = indexOf(chooseLog, item);
    //     if (index !== -1) {
    //       this.setState({
    //         isCheck: true,
    //       });
    //     } else {
    //       this.setState({
    //         isCheck: false,
    //       });
    //     }
    //   }
    // });


    if (radio) {
      if (mod == last(chooseLog)) {
        console.log('11111', chooseLog);
        this.setState({
          isCheck: true,
        });
      } else {
        console.log('22222', chooseLog);
        this.setState({
          isCheck: false,
        });
      }
    } else {
      console.log('isRadio222', radio);
      let index = indexOf(chooseLog, mod);
      if (index !== -1) {
        this.setState({
          isCheck: true,
        });
      } else {
        this.setState({
          isCheck: false,
        });
      }
    }



  }

  componentDidUpdate() {
    // console.log(this.state.isCheck);

  }

  componentDidMount() {
    const { mod } = this.props;
    let image = new Image();
    image.src = mod.img;
    image.onload = () => {
      image.width >= image.height ? this.setState({isWidth: true, }) : this.setState({isWidth: false, });
    };

  }



  render() {
    const { mod } = this.props;
    const { isCheck, isWidth } = this.state;

    const props = {
      className: css.image,
      style: {
        outline: isCheck ? '1px #bbbbbb solid' : '1px #dddddd solid',
      },
      onClick: this.click.bind(this),
    };
    const imgProps = {
      src: mod.img,
      style: {
        width: isWidth && 160,
        height: !isWidth && 160,
      }
    };

    const iconProps = {
      type: isCheck ? 'icon-radio-checked' : '',
      className: css.yuan,

    };
    return (
      <div className={css.wrapper}>
        <div {...props}>
          <img {...imgProps}/>
        </div>
        <Icon {...iconProps}/>
        <p>{mod.name}</p>
      </div>

    );
  }
}
